<template>
  <div class="code-layout">

    <!-- <div class="code-materials" v-if="detailData">
      <div>
        <plug-state :statusStr="status" v-if="status" />
        <br />
      </div>
      <div class="file">
        <file-list :biz_id="detailData.id" type="workspace" />
      </div>
      <md-preview :biz_id="detailData.id" type="workspace" class="preview" />
    </div> -->

    <div class="code-info">
      <div class="code-info-item">
        <h3 class="info-title">基本信息<i class="el-icon-edit-outline edit" @click="updateBase" /></h3>
        <ul class="info-item">
          <li>
            <span class="key">名称:</span>
            <span class="val">{{ detailData.name }}</span>
          </li>
          <li>
            <span class="key">仿真环境:</span>
            <span class="val">{{ detailData.image.name }}</span>
          </li>
          <li>
            <span class="key"> 创建人： </span>
            <span class="val">
              {{
                detailData.create_user && (detailData.create_user &&
                  detailData.create_user.nick_name ||
                  detailData.create_user && detailData.create_user.username)
              }}
            </span>
          </li>
          <li>
            <span class="key">创建时间： </span>
            <span class="val">{{ detailData.create_time }}</span>
          </li>
        </ul>
      </div>

      <div class="code-info-item">
        <h3 class="info-title">推演方<i class="el-icon-edit-outline edit" @click="updateDeduction" /></h3>
        <dl class="code-dl" v-for="(e, i) in detailData.deduction_list" :key="i">
          <ul class="info-item">
            <li>
              <span class="key">名称:</span>
              <span class="val">{{ e.name }}</span>
            </li>
            <li>
              <span class="key">参数:</span>
              <span class="val">{{ e.key }}</span>
            </li>
          </ul>
        </dl>
      </div>

      <div class="code-md">
        <md-preview :biz_id="detailData.id" type="workspace" class="preview" />
      </div>
    </div>

    <!-- <el-dialog :visible.sync="showUpdateBaseDialog" title="想定管理基本信息" width="840px">
      <el-form class="form myself-form" ref="form" :rules="submitRules" :model="formDataDialog" label-width="120px">
        <el-form-item label="名称" prop="name">
          <el-input type="text" v-model="formDataDialog.name" />
        </el-form-item>
        <el-form-item label="仿真环境" prop="image_id">
          <div class="select">
            <el-select v-model="formDataDialog.image_id" class="full-extent-select">
              <el-option v-for="item in imageOptions" :value="item.id" :label="item.name" :key="item.id">
              </el-option>
            </el-select>
          </div>
        </el-form-item>

        <el-form-item label="配图">
          <media-uploader accept=".jpg,.jpeg,.png,.JPG,.JPEG" :src="formDataDialog.avatar" @avatarPath="avatarPath" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input type="textarea" :rows="3" v-model="formDataDialog.desc" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button class="none-type" type="primary" @click="commitBase">确定</el-button>
        <el-button class="none-type" @click="cancelBase">取消</el-button>
      </span>
    </el-dialog> -->

    <!-- <el-dialog :visible.sync="showUpdateDeductionDialog" title="想定管理基本信息" width="840px">
      <el-form class="form myself-form" ref="form" :model="formData" label-width="120px">
        <el-form-item>
          <div class="outin-box" v-for="(e, i) in deduction_list" :key="i">
            <div class="outin-input">
              <div class="outin-input-name">
                <span class="outin-input-name-title">名称</span>
                <el-input class="entrance" v-model="e.name" />
                <span class="outin-input-name-title">参数</span>
                <el-input class="entrance" v-model="e.key" />
              </div>
              <span class="outin-handle">
                <a href="javascript:;" @click="addDeduction()" v-if="i == deduction_list.length - 1">增加</a>
                <span v-else class="slot-btn"></span>
                <a href="javascript:;" @click="delDeduction(i)" v-if="deduction_list.length > 1">删除</a>
              </span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label=" ">
          <el-button class="none-type" type="primary" @click="commitDeduction">确定</el-button>
          <el-button class="none-type" @click="cancelDeduction">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->

    <DialogBox title="想定管理基本信息" :visible="showUpdateBaseDialog" :confirm="commitBase" :close="cancelBase">
      <el-form class="form myself-form" ref="form" :rules="submitRules" :model="formDataDialog" label-width="120px">
        <el-form-item label="名称" prop="name">
          <el-input type="text" v-model="formDataDialog.name" />
        </el-form-item>
        <el-form-item label="仿真环境" prop="image_id">
          <div class="select">
            <el-select v-model="formDataDialog.image_id" class="full-extent-select">
              <el-option v-for="item in imageOptions" :value="item.id" :label="item.name" :key="item.id">
              </el-option>
            </el-select>
          </div>
        </el-form-item>

        <el-form-item label="配图">
          <media-uploader accept=".jpg,.jpeg,.png,.JPG,.JPEG" :src="formDataDialog.avatar" @avatarPath="avatarPath" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
          <el-input type="textarea" :rows="3" v-model="formDataDialog.desc" />
        </el-form-item>
      </el-form>
    </DialogBox>

    <DialogBox title="想定管理基本信息" :visible="showUpdateDeductionDialog" :confirm="commitDeduction" :close="cancelDeduction">
      <el-form class="form myself-form" ref="form" :model="formData" label-width="120px">
        <el-form-item>
          <div class="outin-box" v-for="(e, i) in deduction_list" :key="i">
            <div class="outin-input">
              <div class="outin-input-name">
                <span class="outin-input-name-title">名称</span>
                <el-input class="entrance" v-model="e.name" />
                <span class="outin-input-name-title">参数</span>
                <el-input class="entrance" v-model="e.key" />
              </div>
              <span class="outin-handle">
                <a href="javascript:;" @click="addDeduction()" v-if="i == deduction_list.length - 1">增加</a>
                <span v-else class="slot-btn"></span>
                <a href="javascript:;" @click="delDeduction(i)" v-if="deduction_list.length > 1">删除</a>
              </span>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </DialogBox>
  </div>
</template>

<script>
// import plugState from '@/components/module/plug-state'
import DialogBox from '@/components/module/dialog-box.vue';
import { putScenario, getScenarioDetail } from '@/api/scenario'
import { getAllImages } from '@/api/image'
export default {
  data() {
    return {
      status: null,
      formData: null,
      showUpdateDeductionDialog: false,
      deduction_list: [{ name: null, parameters: null }],
      showUpdateBaseDialog: false,
      imageOptions: [],
      submitRules: {
        name: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 40, message: "长度在1到40个字符" },
        ],
        image_id: [
          { required: true, message: "该项为必填项" }
        ],
        desc: [
          { required: true, message: "该项为必填项" },
          { required: true, min: 1, max: 200, message: "长度在1到200个字符" },
        ],
      },
      formDataDialog: {}
    };
  },
  components: {
    // plugState,
    DialogBox,
  },
  props: ['detailData'],
  watch: {
    detailData(val) {
      this.status = val.status;
      this.formData = val
    },
  },
  async created() {
    // this.getFormData()
  },

  async mounted() {
    this.$nextTick(() => {
      console.log(this.detailData)
    })
    this.getImages()
  },
  destroyed() {

  },
  methods: {
    avatarPath(data) {
      this.formData.avatar = data;
    },
    updateBase() {
      this.formDataDialog = { ...this.detailData }
      this.showUpdateBaseDialog = true
    },
    commitBase() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let res = await putScenario(this.formDataDialog);
          if (res && res.data) {
            this.$emit("getDetail")
            this.showUpdateBaseDialog = false
          }
        }
      })
    },
    cancelBase() {
      this.showUpdateBaseDialog = false
    },

    async getImages() {
      let ret = await getAllImages({ visibility: '1', type: '3' })
      this.imageOptions = ret.data
    },
    getFormData() {
      this.formData = JSON.parse(JSON.stringify(this.detailData))
      this.deduction_list = this.formData.deduction_list
      if (this.deduction_list.length == 0) {
        this.deduction_list.push({ name: null, parameters: null })
      }
      this.status = this.formData.status;
    },
    editState(state) {
      console.log(state)
    },
    updateDeduction() {
      this.deduction_list = [...this.detailData.deduction_list]
      this.showUpdateDeductionDialog = true
    },

    commitDeduction() {
      this.setFormData()
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let res = await putScenario(this.formData);
          if (res && res.data) {
            this.showUpdateDeductionDialog = false
            this.freshData()
          }
        }
      })
    },
    cancelDeduction() {
      this.showUpdateDeductionDialog = false
    },
    addDeduction() {
      this.deduction_list.push({ name: null, key: null, parameters: null })
    },
    delDeduction(i) {
      this.deduction_list.splice(i, 1)
    },
    setFormData() {
      this.formData.deduction_list = []
      for (let i = 0; i < this.deduction_list.length; i++) {
        if (this.deduction_list[i].name != null && this.deduction_list[i].name.length > 0) {
          this.formData.deduction_list.push(this.deduction_list[i])
        }
      }
    },
    async freshData() {
      let res = await getScenarioDetail({ id: this.detailData.id });
      if (res && res.data) {
        this.$emit('update:detailData', res.data);
        this.getFormData()
      }
    }
  }
}
</script>
<style lang="less" scoped>
@import "~@/assets/css/code.less";
</style>